<template>
	<view>
		<nav-bar class="header" title="图片预览" @goBack="goBack">
		</nav-bar>
		<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
			<van-list v-model="isLoading" :finished="finished" @load="loadMore" :immediate-check='false'>
				<view class="step-wrap" v-if="stepList.length>0">
					<van-steps direction="vertical" :active="stepList.length - 1">
						<van-step :key="index" v-for="(item,index) in stepList">
							<template v-slot:active-icon>
								<!-- 自定义激活时的样式 -->
								<view class="step-item">
									<view class="steps-active-icon">
										<!-- 如果有icon或者图片可以更换放在这里，我的比较简单，我直接css画个圆 -->
									</view>
								</view>
							</template>
							<template v-slot:finish-icon>
								<!-- 自定义激活时的样式 -->
								<view class="step-item">
									<view class="steps-active-icon">
										<!-- 如果有icon或者图片可以更换放在这里，我的比较简单，我直接css画个圆 -->
									</view>
								</view>
							</template>
							<view class="inspection-wrap">
								<view class="inspection-name">
									<view class="inspection-left">
										<view class="inspection-time">
											{{item.time}}
										</view>
										<view class="inspection-tip">
											{{item.name}}
										</view>
									</view>
									<view class="inspection-icon" @click="foldBtn(index)">
										<image src="../../../../static/img/ydtz-up.png" mode="" v-if="item.foldShow">
										</image>
										<image src="../../../../static/img/ydtz-down.png" mode="" v-else></image>
									</view>
								</view>
								<view class="inspection-picture" v-if="item.foldShow">
									<view class="inspection-picture-item" v-for="(item,index) in item.pathList"
										:key="index">
										<image :src="baseUrl+item" :data-src="baseUrl+item" mode="" @tap="previewImage">
										</image>
									</view>
								</view>
							</view>
						</van-step>
					</van-steps>
				</view>
			</van-list>
		</van-pull-refresh>
		<view v-if="stepList.length==0" class="site-other">
			— — 暂无数据，请选择其他类型查看 — —
		</view>

	</view>
</template>

<script>
	import navBar from "../../../../components/common/nav-bar.vue";
	import {
		getPicture
	} from "../../../../api/ydtzApi.js"
	import config from "../../../../common/config";
	export default {
		data() {
			return {
				baseUrl: "http://192.168.124.97:18001",
				objId: null,
				refreshing: false, // 是否正在刷新
				finished: false,
				isLoading: false,
				total: 0, // 总条数
				page: 1,
				limit: 6,
				stepList: [],
				foldShow: true,
				show: false,
				imageUrl: ''
			}
		},
		components: {
			navBar
		},
		onLoad(option) {
			this.objId = option.objId
			this.getTaskListByAdminT()
			// config.getOptions.then(res => {
			// 	console.log(res, '在图片中打印')
			// 	this.baseUrl = res.firstUrl;
			// 	console.log(res.firstUrl, '在图片中打印res.firstUrl')
			// })
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			// 图片预览
			previewImage(e) {
				var current = e.target.dataset.src;
				let baseUrl = this.baseUrl;
				let photoList = this.stepList.map(item => {
					return {
						// ...item,
						pathList: item.pathList.map(val => baseUrl + val)
					}
				})
				console.log(this.baseUrl, 'baseUrl')
				console.log(photoList[0].pathList, 'current')
				uni.previewImage({
					current: current,
					urls: photoList[0].pathList
				})



				// console.log(photoList[0].pathList[index],"photoList[0].pathList")
				/* uni.previewImage({
					current: photoList[0].pathList[index], // 当前显示图片的索引值
					urls: photoList[0].pathList, // 需要预览的图片列表，photoList要求必须是数组
					loop: true, // 是否可循环预览
				}) */
			},
			// 获取列表
			getTaskListByAdminT() {
				this.$apiRequest.ydtzApi.getPicture({
						objId: this.objId,
						pageSize: this.limit,
						pageNum: this.page
					})
					.then(({
						data: res
					}) => {
						this.stepList = this.stepList.concat(res.rows.map(item => {
							let pathList = []
							return {
								pathList: item.path.split(','),
								foldShow: true,
								...item
							}
						}));
						this.isLoading = false;
						this.refreshing = false;
						this.total = res.total
					})
			},
			onRefresh() {
				this.refreshing = true;
				this.finished = false;
				this.page = 1;
				this.stepList = [];
				this.getTaskListByAdminT();
			},
			loadMore() {
				if (this.total > this.stepList.length) {
					this.page = this.page + 1;
					this.getTaskListByAdminT();
				} else {
					this.finished = true;
				}
			},
			// 折叠按钮
			foldBtn(index) {
				// this.foldShow = !this.foldShow
				this.stepList[index].foldShow = !this.stepList[index].foldShow
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f2f6fa;
	}

	.header {
		position: sticky;
		top: 0;
		z-index: 999;
	}

	::v-deep .van-step--vertical:not(:last-child)::after {
		border-bottom-width: 0
	}

	.step-wrap {
		width: calc(100vw - #{px2vw(60)});
		background: #ffffff;
		border-radius: px2vh(20);
		margin: 0 auto;
		margin-top: px2vh(30);
		padding: px2vh(60) px2vw(30);
		box-sizing: border-box;
	}

	.inspection-name {
		display: flex;
		justify-content: space-between;

		& .inspection-left {
			display: flex;

			.inspection-time {
				font-size: px2vw(46);
				color: #417adc;
				line-height: px2vw(62);
			}

			.inspection-tip {
				font-size: px2vw(42);
				color: #666;
				line-height: px2vh(62);
				margin-left: px2vw(27);
			}
		}

		& .inspection-icon {
			width: px2vw(32);
			height: px2vh(19);

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.inspection-picture {
		padding: px2vh(52) 0;
		display: flex;
		// justify-content: space-between;
		border-bottom: px2vh(2) dashed #e5e5e5;
		flex-wrap: wrap;

		.inspection-picture-item {
			width: px2vw(230);
			height: px2vw(230);
			margin-right: px2vw(40);
			margin-bottom: px2vh(50);

			image {
				width: 100%;
				height: 100%;
			}

		}
	}

	.steps-active-icon {
		width: 14px;
		height: 14px;
		box-sizing: border-box;
		background: #417ADC;
		border: 3px solid #ECF1FB;
		border-radius: 50%;
	}

	::v-deep .van-step--horizontal .van-step__line {
		height: 10px; // 自定义调整进度条的粗细
		top: 28px; // 自定义调整进度条的位置
		background-color: #e4e4e4;
	}

	::v-deep .van-step--finish .van-step__line {
		background-color: transparent; //自定义激活时进度条的颜色
		border: 1px dashed #417ADC;
		width: 0;
		left: -16px;
	}

	::v-deep .van-step__title--active {
		color: #969799;
	}

	.site-other {
		position: absolute;
		top: 12%;
		width: 100vw;
		text-align: center;
		font-size: px2vh(36);
		color: #9B9CAA;
		font-weight: 600;
	}
</style>